<%@ page language="java" import="java.util.*,com.dao.*,com.beans.*,com.utils.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";            
%>
<!DOCTYPE html>  
<html>
  <head>
     <base href="<%=basePath%>">    
       <%
      		if(!StrUtil.isNullOrEmpty(request.getParameter("goodsId"))){
      			int goodsId=Integer.parseInt(request.getParameter("goodsId"));
      			GoodsInfo goods=new GoodsDao().getGoodsById(goodsId);
      			request.setAttribute("goods", goods); 
      		}
       %>
       
    <title>商品修改</title>   
	<link rel="stylesheet" type="text/css" href="css/edittable.css"  ></link>  
	<link rel="stylesheet" type="text/css" href="css/validate.css"  ></link>  
	<script type="text/javascript"  src="js/jquery-1.8.0.js"></script>
	<script type="text/javascript"  src="js/validate.js"></script>
			<script>	
				$(function(){
				    //点击文件选择框后,把选中的文件路径,展示在假的文本框内
					$("#picture").change(function(){
						$("#pic_instead").val(this.value);
					});
						
						
				    //点击重置后,把页面信息清除
				    $("#btnreset").click(function(){
				    	clearInfo();
				    	return false;
				    	
				    } );
				    
					function clearInfo(){
						$("label").html("");
						$("input[type=text]").val("");
						$("#preview").removeAttr("src");
						$("#bigCateId").val("-1");  //让大分类下拉框选中第一项
						$("#smallCateId").empty();  
						$(":file").val("");
						$("#smallCateId").append("<option value='-1'>-所属小分类-</option>");
					}
				});
				
				//处理文本域和按钮鼠标的动态相式
				$(function(){	
					 $("input[type=text],textarea").focus(function(){
						  $(this).addClass("input_focus");
						}).blur(function(){
								$(this).removeClass("input_focus");
						});
	
					$(".form_btn").hover(function(){
							$(this).css("color","red").css("background","#6FB2DB");
						},
						
						function(){
							$(this).css("color","#295568").css("background","#BAD9E3");
						});
				});
				
				//初始化下拉框
				$(function(){
					$("#bigCateId").change(function(){
						if(this.value=="-1"){
							$("#smallCateId").html("<option>-所属小分类-</option>");
							return;
						}
						$.ajax({
							url:"CateServlet.do",
							type:"POST",
							async:false,
							dataType:"json",
							data:{bigcateid:this.value,flag:"listsmallcate"},
							success:function(cateList){
								$("#smallCateId").empty();
								$.each(cateList,function(key,cateInfo){
									var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
									$("#smallCateId").append(optionStr);
								});
								
								//如果是页面回发,要让列表框选中原来选中的值(在ie6中还有 一些问题,要进行处理)
								$("#smallCateId").val("${goods.smallCateId}");
								
							}
						});
					
					});
					
					//页面提交回发后,要再初始化一下二级下拉框 
					$("#bigCateId").change();
					
				});
				
			
				
				//验证用户名
				function validateGoodsName(item){
					var result=true;
					var reg=/^\S{2,20}$/;   //2-20个非空字符
					if(!reg.test(item.value)){
						result=false;
						showError(item,"商品名称格式不正确");
					}	

					if(result==true){
						showOk(item);
						
					}
					return result;	
				}
				
				//验证计量单位
				function validateUnit(item){
					var result=true;
					var reg=/^\S{1,10}$/;   //1-10个非空字符
					if(!reg.test(item.value)){
						result=false;
						showError(item,"计量单位格式不正确");
					}	

					if(result==true){
						showOk(item);
					}
					return result;	
				}
				
				//验证商品价格
				function validatePrice(item){
					var result=true;
					
					if(item.value==""){
						result=false;
						showError(item,"请添写商品价格");
					}
					else if(isNaN(item.value)){
						result=false;
						showError(item,"商品价格格式不正确");
					}	
					
					else if(item.value<0){
							result=false;
							showError(item,"难道这商品卖了还要倒找钱吗");
					}
					
					if(result==true){
						showOk(item);
					}
					return result;	
				}
				
				
		
				//总验证
				function validateInput(){
					$("#result_msg").html("");  //清除原来的验证信息
					var result=true;
					
					if(validateGoodsName(document.getElementById("goodsName"))==false){
						result=false;
					}
					
					if(validateUnit(document.getElementById("unit"))==false){
						result=false;
					}
					
					if(validatePrice(document.getElementById("price"))==false){
						result=false;
					}
	
					if(result==true){
						result=confirm('确定提交吗');
					}
					
					return result;
					
				}
				

								
	  	</script>
	  	
	  	<script type="text/javascript">
	  		  function setImagePreview(docObj, localImagId, imgObjPreview, width, height) {
				if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性        
					imgObjPreview.style.display = 'block';
					imgObjPreview.style.width = width;
					imgObjPreview.style.height = height;
					//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式        
					imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
				} else { //IE下，使用滤镜      
					docObj.select();
					var imgSrc = document.selection.createRange().text;
					//必须设置初始大小        
					localImagId.style.width = width;
					localImagId.style.height = height;
					//图片异常的捕捉，防止用户修改后缀来伪造图片        
					try {
						localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
						localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
					} catch (e) {
						alert("您上传的图片格式不正确，请重新选择!");
						return false;
					}
					imgObjPreview.style.display = 'none';
					document.selection.empty();
				}
			}
	 
	  	</script>
	  	
	  	<style>
	  	  		/*模拟文件控件的文本框*/
	  			.file-box{ 
	  				position:relative;width:320px
	  			} 
				
				/*模拟文件控件的提交按钮*/
				.filebtn{ 
					background-color:#FFF; 
					border:1px solid #CDCDCD;
					height:20px; 
					width:70px;
				} 
				/*把真的文件控件藏起来*/
				.file{ 
					position:absolute; 
					top:0; 
					right:40px; 
					filter:alpha(opacity:0);opacity: 0;
					width:280px;
					height:30px;
				} 

				label{
					margin-left:10px;
				}
	  			
	  	
	  	</style>
  </head>
  
  <body>

     <div class ="div_title">
		 <div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品管理  商品信息修改</span></div>
	 </div>
				 
	 <form action="GoodsServlet.do?flag=update" 
	 	method="post" 
	 	name="form1" 
	 	enctype="multipart/form-data" 
	 	onsubmit="return validateInput()"
	 	>
	     <input type="hidden" name="goodsId" value="${goods.id}">
		 <table class="edit_table" >
		 		<tr>
		 			 	<td class="td_info">商品名称:</td>	
		 			 	<td class="td_input"> 
		 			 		<input type="text" class="txtbox" id="goodsName" name="goodsName" 
		 			 			onfocus="showInfo(this,'2-20位非空白字符')" 
		 			 			onblur="validateGoodsName(this)"
		 			 			value ="${goods.goodsName}"
		 			 		/> 
		 			 		<label class="validate_info" id="goodsName_msg">2-20位非空白字符</label>
		 			 	</td>   
		 			 	<td></td>
		 			 
		 		</tr>
		 			<tr>
		 			<%
		 				List<CateInfo> cateList=new CateDao().getCateList(0); 
		 				request.setAttribute("cateList", cateList);
		 			 %>
		 				<td class="td_info">所属分类</td>	
		 				<td>
							<select name="bigCateId" id="bigCateId">
								<option value="-1">-所属大分类-</option>
									<c:forEach var="cate" items="${cateList }">
										<c:choose>
											<c:when test="${cate.id==goods.bigCateId }">
												<option value="${ cate.id}" selected="selected">${cate.cateName }</option>
											</c:when>
										<c:otherwise>
											<option value="${ cate.id}">${cate.cateName }</option>
										</c:otherwise>
										</c:choose>
									</c:forEach>
							</select>
		 					<select id="smallCateId" name="smallCateId">
		 						<option value="-1" >-所属小分类-</option>
		 					</select>
		 					<label  class="validate_info" id="password_msg"   >请指定商品所属的分类</label>
		 						<script>
		 							$("#bigCateId").change();
		 							
		 							
		 						</script>
		 				</td> 
		 				<td></td>
		 		</tr>
		 		<tr>
		 				<td class="td_info">计量单位</td>	
		 				<td><input type="text" class="txtbox" id="unit" name="unit"  
		 					onfocus="showInfo(this,'1-10个非空字符')" 
		 					onblur="validateUnit(this)"
		 					value ="${goods.unit }"
		 					 /> 
		 					<label  class="validate_info"  id="unit_msg">1-10个非空字符</label>
		 				</td>
		 				<td></td>
		 			
		 		</tr>
		 		<tr>
		 				<td class="td_info">商品价格</td>	
		 				<td><input type="text" class="txtbox" id="price" name="price"  
		 					onfocus="showInfo(this,'不能为空,以元为单位,可以是小数')" 
		 					onblur="validatePrice(this)"
		 					value ="${goods.price }"
		 						 /> 
		 					<label  class="validate_info"  id="price_msg">不能为空,以元为单位,可以是小数</label>
		 				</td>
		 				<td></td>
		 				
		 		</tr>
		 		
		 		<tr>
		 				<td class="td_info">生产厂商</td>	
		 				<td><input type="text" class="txtbox" id="price" name="producter" 	value ="${goods.producter }" />
		 				 <label  class="validate_info"  id="producter_msg"></label></td>
		 				<td></td>
		 		</tr>
		 		
		 		<tr >
		 				<td class="td_info">商品图片</td>	
		 				<td>
		 				     <div class="file-box"> 
						
								<input type='text' name='pic_instead' id='pic_instead' class='txtbox' /> 
								<input type='button' class='filebtn' value='找找...' /> 
								<input type="file" name="picture" class="file" id="picture" size="28" 
								onchange="setImagePreview(this,localImag,preview,'100px','125px');" /> 
							</div> 
   					<div id="localImag" style="margin-left: 24px" ></div>
			    	<img id="preview" alt="请上传图片"  src="goods/picture.jsp?goodsId=${goods.id}" />
			    <label  class="validate_info"  id="picture_msg"></label>
		 				</td>
		 			<td></td>
		 		</tr>
		 		
		 		<tr>
		 			<td class="td_info">备注信息:</td>	
		 			<td><textarea rows="4" cols="27" name="des" class="txtarea"  >${goods.des }</textarea> </td>	
		 				<td></td>
		 		</tr>
		 		<tr>
		 			<td class="td_info"> </td>	
		 			<td> 
		 			<input class="form_btn" type="submit"  value="提交" /> 
		 			<button id="btnreset"  class="form_btn" >重置</button>
		 			<label id="result_msg" class="result_msg">${msg}</label>
		 			</td>	
		 			<td></td>
		 		</tr>
		</table>
	
     </form>
  </body>
</html>
